<template>
  <view
    class="nabtabs"
    :style="{paddingTop: navBarHeight?navBarHeight + 'px' : ''}"
  >
    <view
      class="nabtabs-head"
      :style="{height: titleBarHeight?titleBarHeight + 'px' : '',top: statusBarHeight?statusBarHeight + 'px' : ''}"
    >
      <view
        class="nabtabs-head-item"
        :class="currentTab==0?'active':''"
        data-current="0"
        @click="swichNav"
      >
        推荐
      </view>
      <view
        class="nabtabs-head-item"
        :class="currentTab==1?'active':''"
        data-current="1"
        @click="swichNav"
      >
        发现
      </view>
    </view>
    <swiper
      class="nabtabs-content"
      :current="currentTab"
      duration="300"
      @change="switchTab"
    >
      <swiper-item
        v-for="(item,index) in [0,1,2,3,4,5,6,7]"
        :key="index"
      >
        <scroll-view
          scroll-y="true"
          class="nabtabs-content-scroll"
        >
          <block
            v-for="(temp,i) in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]"
            :key="i"
          >
            <view class="item-ans">
              <view class="avatar">
                <image
                  class="img"
                  src="http://oss.youmbe.com/attachments/avatar/29.jpg"
                />
              </view>
              <view class="expertInfo">
                <view class="name">欢颜{{item}}-{{temp}}</view>
                <view class="tag">知名情感博主</view>
                <view class="answerHistory">134个回答，2234人听过 </view>
              </view>
              <navigator
                url="/pages/askExpert/expertDetail"
                class="askBtn"
              >问TA</navigator>
            </view>
          </block>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  props: {
    homeIshide: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      statusBarHeight: 20, // 状态栏高度
      titleBarHeight: '', // 标题栏高度
      navBarHeight: '', // 导航栏总高度
      currentTab: 0, // 预设当前项的值
      scrollLeft: 0, // tab标题的滚动条位置
      expertList: [
        {
          // 假数据
          img: 'avatar.png',
          name: '欢顔',
          tag: '知名情感博主',
          answer: 134,
          listen: 2234
        }
      ]
    }
  },
  onLoad () {
    console.log('on load')
    let systemData = mpvue.getStorageSync('systemData')
    this.statusBarHeight = systemData.statusBarHeight
    let platformReg = /ios/i
    if (platformReg.test(systemData.platform)) {
      this.titleBarHeight = 46
    } else {
      this.titleBarHeight = 50
    }
    this.navBarHeight = this.statusBarHeight + this.titleBarHeight
  },
  watch: {},
  computed: {
    // navBackgroundColor () {
    //   return 'rgba(255,255,255,' + this.opacity + ')'
    // }
    // tempNavBarHeight () {
    //   return this.statusBarHeight + this.titleBarHeight
    // }
  },
  beforeMount () {
    // console.log('on beforeMount')
    // console.log(this.systemData)
    // console.log(this.menuButtonObject)
    // let systemData = mpvue.getStorageSync('systemData')
    // this.statusBarHeight = systemData.statusBarHeight
    // // // let space = this.menuButtonObject.top - this.statusBarHeight
    // // // this.titleBarHeight = space * 2 + this.menuButtonObject.height + this.systemData.pixelRatio * this.systemData.screenWidth / 750
    // // // this.titleBarHeight = space + this.menuButtonObject.height + 8
    // let platformReg = /ios/i
    // if (platformReg.test(systemData.platform)) {
    //   this.titleBarHeight = 44
    // } else {
    //   this.titleBarHeight = 48
    // }
    // this.navBarHeight = this.statusBarHeight + this.titleBarHeight
  },
  mounted () {
    // if (this.cover) {
    //   this.panelBackground = `url('` + this.cover + `');`
    // }
    // this.titleText = this.title
    // console.log(`this.backVisible:`, this.backVisible);
  },
  methods: {
    // 滚动切换标签样式
    switchTab (e) {
      this.currentTab = e.mp.detail.current
    },
    // 点击标题切换当前页时改变样式
    swichNav (e) {
      var cur = e.mp.target.dataset.current
      if (this.currentTab === cur) {
        return false
      } else {
        this.currentTab = cur
      }
    }
  }
}
</script>

<style lang="less" scoped>
.nabtabs {
  height: 100%;
  padding-top: 20px;
  box-sizing: border-box;
  &-head {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    height: 48px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 16px;
    white-space: nowrap;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding-bottom: 2px;
    &-item {
      padding: 0 15px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      height: 100%;
      position: relative;

      // -webkit-transition: all 100ms ease-in-out;
      // -moz-transition: all 100ms ease-in-out;
      // -o-transition: all 100ms ease-in-out;
      // -ms-transition: all 100ms ease-in-out;
      // transition: all 100ms ease-in-out;

      // animation: viewlinear 1000ms ease-in-out infinite;

      &::after {
        height: 4px;
        border-radius: 4px;
        width: 20px;
        background: transparent;
        margin-left: -10px;
        position: absolute;
        left: 50%;
        bottom: 2px;
        content: '';
        display: block;
      }
      &.active {
        font-size: 20px;
        font-weight: bold;
        &::after {
          background: #4675f9;
        }
      }
    }
    // &-item.active:after {
    //   content: "";
    //   height: 8rpx;
    //   width: 52rpx;
    //   background: #4675f9;
    //   border-radius: 16rpx;
    // }
  }

  &-content {
    height: 100%;
    box-sizing: border-box;
    &-scroll {
      height: 100%;
    }
  }
}

.item-ans {
  width: 100%;
  display: flex;
  flex-grow: row no-wrap;
  justify-content: space-between;
  padding: 30rpx;
  box-sizing: border-box;
  height: 180rpx;
  align-items: center;
  border-bottom: 1px solid #f2f2f2;
}
.avatar {
  width: 100rpx;
  height: 100rpx;
  position: relative;
  padding-right: 30rpx;
}
.avatar .img {
  width: 100%;
  height: 100%;
}
.avatar .doyen {
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  bottom: -2px;
  right: 20rpx;
}
.expertInfo {
  font-size: 12px;
  flex-grow: 2;
  color: #b0b0b0;
  line-height: 1.5em;
}
.expertInfo .name {
  font-size: 16px;
  color: #000;
  margin-bottom: 6px;
}
.askBtn {
  width: 120rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  font-size: 14px;
  border-radius: 60rpx;
  border: 1px solid #4675f9;
  color: #4675f9;
}
</style>
